<!-- 数据集成 -->
<script setup lang="ts">
// const imageUrl = ref('');

import { onMounted, ref } from 'vue';

import * as Cesium from 'cesium';

const viewer = ref();
console.log(111_111_111_111, Cesium);
onMounted(() => {
  // const viewer = new Cesium.Viewer('cesiumContainer', {
  //   infoBox: false, // 禁用沙箱，解决控制台报错
  //   navigationHelpButton: false,
  // })
  const viewer = new Cesium.Viewer('cesiumContainer', {
    homeButton: false,  // 隐藏 Home 按钮
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url: '/map/tiles/{z}/{x}/{y}.png', // 本地离线7级瓦片
    }),
    contextOptions: {
      webgl: {
        alpha: true,
        depth: false,
        stencil: true,
        antialias: true,
        premultipliedAlpha: true,
        preserveDrawingBuffer: true,
        failIfMajorPerformanceCaveat: true,
      },
      allowTextureFilterAnisotropic: true,
    },
    selectionIndicator: false,
    animation: false,
    baseLayerPicker: false,
    geocoder: false,
    timeline: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    infoBox: false,
    fullscreenButton: false,
  });
  viewer.cesiumWidget.creditContainer.style.display = "none";
  // 定义 WMTS 图层的参数
  const wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
      url: 'http://192.168.48.107:18080/geoserver/gwc/service/wmts', // GeoServer WMTS 服务的 URL
      layer: 'taiwan:taiwan16new', // GeoServer 中的工作空间和图层名称
      style: '', // 样式名称
      format: 'image/png', // 图片格式
      tileMatrixSetID: 'EPSG:4326', // 瓦片矩阵集 ID，通常是 EPSG:3857 或 EPSG:4326
      tileMatrixLabels: ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18'], // 瓦片矩阵标签
      tilingScheme: new Cesium.GeographicTilingScheme(), // 使用地理坐标系瓦片方案
      maximumLevel: 17, // 最大瓦片级别
      minimumLevel: 0, // 最小瓦片级别
      rectangle: Cesium.Rectangle.fromDegrees(119.33, 21.8, 122.23, 25.5) // 图层的地理范围
  });

  // 将 WMTS 图层添加到 Cesium 视图中
  viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);
  viewer.camera.setView({
    // 设置相机位置，经度，纬度，高度
    destination: Cesium.Cartesian3.fromDegrees(121, 24, 1000000),
    orientation: {
      // 初始视角
      heading: Cesium.Math.toRadians(0), // 偏航角，单位弧度
      pitch: Cesium.Math.toRadians(-90), // 仰俯角，单位弧度
      roll: Cesium.Math.toRadians(0)  // 翻滚角，单位弧度
    }
  })
});
</script>

<template>
  <div style="height: calc(100vh - 70px)">
    <!-- <a-image previewMask= "false" preview="false" :src="dynamicImg" height="100%" width="100%" /> -->
    <div id="cesiumContainer" style="width: 100%; height: 100%"></div>
  </div>
</template>
